<template>
  <!-- 核销管理-核销案件 -->
  <section class="page case-verify">
    <data-form :model="searchModel" :page="pageService" @handleResetForm="handleResetForm" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="订单编号" prop="caseNumber">
          <el-input v-model="searchModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="searchModel.personalName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="searchModel.mobileNo"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="searchModel.idCard"></el-input>
        </el-form-item>
        <el-form-item label="流转来源" prop="turnSource">
          <el-select clearable placeholder="请选择" v-model="searchModel.turnSource">
            <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('TurnSource')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否有附件" prop="commonFlag">
          <el-select clearable placeholder="请选择" v-model="searchModel.commonFlag">
            <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('CommonFlag')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="核销状态" prop="verifyStatus">
          <el-select clearable placeholder="请选择" v-model="searchModel.verifyStatus">
            <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('VerifyStatus')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="案件金额" prop="caseMoney">
          <number-range :isInteger="true" v-model="searchModel.caseMoney"></number-range>
        </el-form-item>
        <el-form-item label="欠款金额" prop="overdueAmount">
          <number-range :isInteger="true" v-model="searchModel.overdueAmount"></number-range>
        </el-form-item>
        <el-form-item label="逾期期数" prop="overduePeriod">
          <el-select clearable placeholder="请选择" v-model="searchModel.overduePeriod">
            <el-option :key="index" :label="name" :value="code.replace(/M|\+/, '')" v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range :isInteger="true" v-model="searchModel.overdueDays"></number-range>
        </el-form-item>
        <el-form-item label="产品类型" prop="productCategory">
          <el-input v-model="searchModel.productCategory"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="searchModel.productName"></el-input>
        </el-form-item>
        <el-form-item label="地区" prop="area">
          <el-input v-model="searchModel.area"></el-input>
        </el-form-item>
        <el-form-item label="案件流入时间" prop="followInTime">
          <el-date-picker :editable="false" clearable placeholder="选择日期时间" type="daterange" v-model="searchModel.followInTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="案件标签" prop="labelName">
          <get-label-name :formModel="searchModel" v-model="searchModel.labelName"></get-label-name>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" :page="pageService" :selectionList.sync="selectionList" @onPageChange="refreshData">
      <template slot="buttons">
        <el-button @click="applyFlowClick" v-auth="1902">申请流转</el-button>
        <el-button @click="verifiedCaseClick" v-auth="1903">核销</el-button>
        <el-button @click="downloadVerifiedCase" v-auth="1904">案件下载</el-button>
      </template>
      <template slot="columns">
        <el-table-column :min-width="$helper.getOperateWidth(2)" label="操作">
          <template slot-scope="scope">
            <el-button @click="rowData=scope.row, dialog.isOpenVerifyFileUpload=true" type="text" v-if="scope.row.commonFlag === 'NO'">上传附件</el-button>
            <el-button @click="viewClick(scope.row)" type="text" v-else>查看附件</el-button>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="订单编号" prop="caseNumber"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="客户姓名" prop="personalName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="手机号" prop="mobileNo"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="身份证号" prop="idCard"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="地区" prop="area"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="案件金额(元)" prop="caseMoney"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="欠款金额(元)" prop="overdueAmount"></el-table-column>
        <el-table-column :formatter="row => $common.isNotValue(row.overduePeriod) ? '':`M${row.overduePeriod}`" :min-width="$helper.getColumnWidth(3)" label="逾期期数" prop="overduePeriod"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="逾期天数" prop="overdueDays"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="产品类型" prop="productCategory"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="产品名称" prop="productName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="还款日" prop="perDueDate"></el-table-column>
        <el-table-column :formatter="(row) => $filter.dictConvert(row.commonFlag,'CommonFlag')" :min-width="$helper.getColumnWidth(4)" label="附件是否提交" prop="commonFlag"></el-table-column>
        <el-table-column :formatter="(row) => $filter.dictConvert(row.verifyStatus,'VerifyStatus')" :min-width="$helper.getColumnWidth(4)" label="核销状态" prop="verifyStatus"></el-table-column>
        <el-table-column :formatter="(row) => $filter.dictConvert(row.turnSource,'TurnSource')" :min-width="$helper.getColumnWidth(4)" label="流转来源" prop="turnSource"></el-table-column>
        <el-table-column :formatter="(row) => $filter.dateTimeFormat(row.followInTime)" :min-width="$helper.getColumnWidth(5)" label="案件流入时间" prop="followInTime"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(10)" label="案件标签" prop="labelName"></el-table-column>
      </template>
    </data-box>

    <!-- 核销案件 -->
    <el-dialog :center="true" :visible.sync="dialog.isOpenCaseVerified" @open="() => this.$nextTick(() => this.$refs['case-verified'].refresh())" title="批量核销案件" width="800px">
      <case-verified :selectionList="selectionList" @close="dialog.isOpenCaseVerified=false" @refreshData="refreshData" ref="case-verified"></case-verified>
    </el-dialog>

    <!--申请弹框-->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :title="`${applyType.name}申请`" :visible.sync="dialog.isOpenApply" width="800px">
      <turn-source-apply :applyType="applyType.value" :caseIds="selectedCaseIds" :fromChannel="fromChannel" @close="dialog.isOpenApply = false;refreshData();" />
    </el-dialog>

    <!--上传附件-->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :visible.sync="dialog.isOpenVerifyFileUpload" title="上传附件" width="900px">
      <verify-file-upload :rowData="rowData" @close="dialog.isOpenVerifyFileUpload = false" @refreshData="refreshData" ref="verify-file-upload"></verify-file-upload>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import NumberRange from "~/components/common/number-range.vue";
import { CaseVerifyService } from "~/services/domain-service/case-verify.service";
import { FileUploadService } from "~/services/file-service/file-upload.service.ts";
import CaseVerified from "~/components/case-verify-manage/case-verified.vue";
import VerifyFileUpload from "~/components/case-verify-manage/verify-file-upload.vue";
import { ApplyType, CASE_CHANNEL } from "~/config/enum.config";
import GetLabelName from "~/components/labeling-strategy/get-label-name.vue";
import TurnSourceApply from "~/components/apply-component/turn-source-apply.vue";

@Auth(1901)
@Layout("workspace")
@Component({
  components: {
    GetLabelName,
    NumberRange,
    CaseVerified,
    VerifyFileUpload,
    TurnSourceApply
  }
})
export default class CaseVerify extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(CaseVerifyService)
  private caseVerifyService: CaseVerifyService;
  @Dependencies(FileUploadService)
  private fileUploadService: FileUploadService;
  // 数据
  private dataSet: any[] = [];
  private applyType = ApplyType.turn;
  private fromChannel: string = CASE_CHANNEL.verify;
  private selectionList: any = [];
  private rowData: any = null;
  private searchModel: any = {
    caseNumber: "",
    personalName: "",
    mobileNo: "",
    idCard: "",
    customerCategory: "",
    productCategory: "",
    productName: "",
    overdueAmount: {
      max: "",
      min: ""
    },
    caseMoney: { min: "", max: "" },
    overduePeriod: "",
    overdueDays: {
      max: "",
      min: ""
    },
    followInTime: ["", ""],
    area: "",
    turnSource: "",
    commonFlag: "",
    verifyStatus: "",
    labelName: []
  };
  // 弹框控制
  private dialog: any = {
    isOpenCaseVerified: false,
    isOpenApply: false,
    isOpenVerifyFileUpload: false
  };

  private mounted() {
    this.refreshData();
  }

  private refreshData() {
    this.caseVerifyService
      .getAllVerifyInfos(this.searchModel, this.pageService)
      .subscribe(data => {
        this.dataSet = data;
        this.selectionList = [];
      });
  }

  /**
   * 核销
   */
  private verifiedCaseClick() {
    if (this.selectionList.length === 0) {
      this.$message.info("请先选择要核销的案件");
      return;
    }
    if (this.selectionList.find(v => v.verifyStatus === "VERIFIED")) {
      this.$alert("选择的案件存在已核销的案件，请重新选择", "提示", {
        confirmButtonText: "确定"
      });
      return;
    }
    this.dialog.isOpenCaseVerified = true;
  }

  /**
   * 申请流转
   */
  private async applyFlowClick() {
    if (this.selectionList.length === 0) {
      this.$message(`请选择要${this.applyType.name}的案件`);
      return;
    }
    this.applyType = ApplyType.turn;
    this.dialog.isOpenApply = true;
  }

  /**
   * 下载附件
   */
  private viewClick(rowData) {
    this.fileUploadService
      .getAllUploadFileByIds(rowData.fileIds)
      .subscribe(data => {
        const fileList = data.map(v => {
          return {
            url: v.url,
            filename: v.fileName
          };
        });
        this.$common.downloadAll(fileList);
      });
  }

  private get selectedCaseIds() {
    return this.selectionList.map(v => v.id);
  }

  /**
   * 需要手动重置的表单项
   */
  private handleResetForm() {
    this.searchModel.overdueAmount = { max: "", min: "" };
    this.searchModel.overdueDays = { max: "", min: "" };
    this.searchModel.followInTime = { max: "", min: "" };
    this.searchModel.caseMoney = { min: "", max: "" };
  }

  /**
   * 下载案件
   */
  private downloadVerifiedCase() {
    const ids = this.selectionList.map(v => v.id);
    const request: any = {
      ...this.searchModel,
      caseIds: ids
    };
    this.caseVerifyService.exportVerifyInfos(request).subscribe(data => {
      this.$common.downloadFile(data.url, "核销案件.xls");
    });
  }
}
</script>

<style lang="less">
</style>
